<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <th:block th:insert="common/common_header::header"></th:block>
</head>
<body>
<div id="app">
    <div class="container-box">
        <div style="width: 100%;padding: 10px 0px;">
            <el-row :gutter="20" style="width: 100%;">
                <el-col :span="5">
                    <el-input v-model="query.roleCode" size="small" placeholder="角色编码" style="width: 200px" clearable></el-input>
                </el-col>
                <el-col :span="5">
                    <el-input v-model="query.roleName" size="small" placeholder="角色名称" style="width: 200px" clearable></el-input>
                </el-col>
                <el-col :span="8">
                    <el-date-picker
                            v-model="query.createDate"
                            type="daterange"
                            size="small"
                            style="width: 300px"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            clearable>
                    </el-date-picker>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" size="small" @click="openMenu">配置菜单</el-button>
                    <el-button type="primary" size="small" @click="openAdd">新增</el-button>
                    <el-button type="primary" size="small" @click="handQuery">查询</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
                :data="tableData"
                stripe
                max-height="430"
                border
                :cell-style="{padding:'2px'}"
                highlight-current-row
                header-cell-class-name="table-header"
                @current-change="handleCurrentRowChange"
                style="width: 100%">
            <el-table-column label="选择" width="50">
                <template slot-scope="scope">
                    <el-radio v-model="singleSelection" :label="scope.row" style="padding-left: 6px;">&nbsp;</el-radio>
                </template>
            </el-table-column>
            <el-table-column
                    type="index"
                    label="序号"
                    width="60">
                <template scope="scope"><span>{{scope.$index+(page.currentPage - 1) * page.pageSize + 1}} </span></template>
            </el-table-column>
            <el-table-column
                    prop="roleCode"
                    label="角色编码"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="roleName"
                    label="角色名称">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="openEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="page.pageSizes"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                    @prev-click="prevClick"
                    @next-click="nextClick"
            >
            </el-pagination>
        </div>
        <el-dialog title="新增" :visible.sync="dialogAddFormVisible" :width="formWidth">
            <el-form :model="addForm">
                <el-form-item label="角色编码" :label-width="formLabelWidth">
                    <el-input v-model="addForm.roleCode" size="small" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="addForm.roleName" size="small" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="addForm.remark" size="small" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogAddFormVisible = false">取 消</el-button>
                <el-button type="primary" size="small" @click="saveAdd">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="dialogEditFormVisible" :width="formWidth">
            <el-form :model="editForm">
                <el-input v-model="editForm.roleId" type="hidden"></el-input>
                <el-form-item label="角色编码" :label-width="formLabelWidth">
                    <el-input v-model="editForm.roleCode" size="small" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="editForm.roleName" size="small" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="editForm.remark" size="small" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogEditFormVisible = false">取 消</el-button>
                <el-button type="primary" size="small" @click="saveEdit">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="菜单" :visible.sync="dialogMenuVisible" :width="treeWidth" top="2%">
            <div style="height: 230px;overflow: auto;">
                <el-tree
                        :data="treeData"
                        show-checkbox
                        node-key="menuCode"
                        ref="tree"
                        :props="defaultProps"
                        @check-change="checkNodesChange"
                        @current-change="currentNodesChange"
                        :default-checked-keys="checkedkeys">
                </el-tree>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogMenuVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="saveRoleMenu">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<th:block th:replace="common/common_footer::footer">
</th:block>
</body>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                query:{
                    roleCode:'',
                    roleName:'',
                    createDate:''
                },
                tableData:[],
                page:{
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                    pageSizes:[10, 20, 30, 50]
                },
                dialogAddFormVisible: false,
                dialogEditFormVisible: false,
                dialogMenuVisible: false,
                addForm: {
                    roleId:'',
                    roleCode:'',
                    roleName:'',
                    remark:''
                },
                editForm: {
                    roleId:'',
                    roleCode:'',
                    roleName:'',
                    remark:''
                },
                formLabelWidth: '120px',
                formWidth: '40%',
                currentRow: null,
                singleSelection: null, //table单选
                treeData: [],
                checkedkeys:[],
                originCheckedkeys:[],
                oldArr:[],
                newArr:[],
                defaultProps: {
                    children: 'menus',
                    label: 'menuName'
                },
                treeWidth: '30%'
            }
        },
        components:{
        },
        created() {

        },
        methods: {
            handleSizeChange(val) {
                this.page.pageSize = val;
                this.page.currentPage = 1;
                this.queryData(this.page);
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.queryData(this.page);
            },
            prevClick(){
                this.currentPage = this.currentPage-1;
            },
            nextClick(){
                this.currentPage = this.currentPage+1;
            },
            queryData(page){
                this.singleSelection = null;
                var params = {};
                if(this.query.createDate!=''&&this.query.createDate!=null&&this.query.createDate.length>0){
                    params.createDateStart = this.query.createDate[0];
                    params.createDateEnd = this.query.createDate[1];
                }
                params.roleName = this.query.roleName;
                params.roleCode = this.query.roleCode;
                params.pageSize = page.pageSize;
                params.pageNum = page.currentPage;
                axios
                    .get(context+'role/queryPage',{
                        params: params
                    })
                    .then(response => {
                        if(response.data && response.data.success){
                            this.tableData = response.data.list;
                            this.total = response.data.total;
                        }else{
                            this.$message({
                                showClose: true,
                                message: response.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            //行变化
            handleCurrentRowChange(currentRow, oldCurrentRow) {
                this.currentRow = currentRow;
                //this.tableRadio = currentRow.roleId;
            },
            //查询
            handQuery(){
                this.queryData(this.page);
            },
            //打开新增
            openAdd(index, row) {
                this.addForm = {};
                this.dialogAddFormVisible = true;
            },
            //保存编辑
            saveAdd() {
                this.dialogAddFormVisible = false;
                var that = this;
                axios.post(context+'role/insert',{
                    roleCode: this.addForm.roleCode,
                    roleName: this.addForm.roleName,
                    remark: this.addForm.remark
                }).then(response => {
                        if(response.data){
                            this.$message({
                                showClose: true,
                                message: response.data.msg,
                                type: response.data.success?'success':'error'
                            });
                            if(response.data.success){
                                this.queryData(this.page);
                            }
                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error)
                    });
            },
            //打开编辑
            openEdit(index, row) {
                this.editForm = row;
                this.dialogEditFormVisible = true;
            },
            //保存编辑
            saveEdit() {
                this.dialogEditFormVisible = false;
                var that = this;
                axios.post(context+'role/update',{
                        roleId: this.editForm.roleId,
                        roleCode: this.editForm.roleCode,
                        roleName: this.editForm.roleName,
                        remark: this.editForm.remark
                    })
                    .then(response => {
                        if(response.data){
                            this.$message({
                                showClose: true,
                                message: response.data.msg,
                                type: response.data.success?'success':'error'
                            });
                            if(response.data.success){
                                this.queryData(this.page);
                            }
                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            handleClick(row) {
                console.log(row);
            },
            handleDel(index, row){
                axios.get(context+'role/deleteById',{
                        params: {
                            roleId: row.roleId,
                        }
                    })
                    .then(response => {
                        if(response.data){
                            this.$message({
                                showClose: true,
                                message: response.data.msg,
                                type: response.data.success?'success':'error'
                            });
                            if(response.data.success){
                                this.queryData(this.page);
                            }
                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            openMenu(row, column, event){
                if(this.singleSelection==null){
                    this.$message({
                        showClose: true,
                        message: "请选择一条记录",
                        type: 'warning'
                    });
                    return;
                }
                this.dialogMenuVisible = true;
                this.loadMenuData();
            },
            loadMenuData(){
                this.checkedkeys = [];
                axios.get(context+'role/getRoleMenus?pCode=m_00&roleCode='+this.singleSelection.roleCode).then(response => {
                        this.treeData = response.data;
                        this.getMenus(response.data);
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    })
            },
            getMenus(dataArr){
                for(var i=0;i<dataArr.length;i++){
                    var dd = dataArr[i];
                    if(dd.roleCode!=undefined && dd.roleCode!='' && dd.roleCode!=null){
                        this.originCheckedkeys.push(dd.menuCode);
                        if(dd.menus && dd.menus.length>0){
                            var flag = true;
                            for(var y=0;y<dd.menus.length;y++){
                                if(dd.menus[y].roleCode==undefined || dd.menus[y].roleCode=='' || dd.menus[y].roleCode==null){
                                    flag = false;
                                    break;
                                }
                            }
                            if(flag){
                                this.checkedkeys.push(dd.menuCode);
                            }
                        }else{
                            this.originCheckedkeys.push(dd.menuCode);
                            this.checkedkeys.push(dd.menuCode);
                        }
                    }
                    if(dd.menus && dd.menus.length>0){
                        this.getMenus(dd.menus);
                    }
                }
            },
            currentNodesChange(a,b){
            },
            checkNodesChange(a,b,c){
            },
            saveRoleMenu(){
                var newCheckedkeys = [];
                var addArr = [];
                var delArr = [];
                var checkedNodes = this.$refs.tree.getCheckedNodes(false,true);
                for(var k=0;k<checkedNodes.length;k++){
                    newCheckedkeys.push(checkedNodes[k].menuCode);
                }
                console.log('1',newCheckedkeys);
                for(var i=0;i<this.originCheckedkeys.length;i++){
                    if(!newCheckedkeys.includes(this.originCheckedkeys[i])){
                        delArr.push(this.originCheckedkeys[i]);
                    }
                }
                for(var j=0;j<newCheckedkeys.length;j++){
                    if(!this.originCheckedkeys.includes(newCheckedkeys[j])){
                        addArr.push(newCheckedkeys[j]);
                    }
                }
                if(addArr.length==0 && delArr.length==0){
                    this.$message({
                        showClose: true,
                        message: "数据无变化",
                        type: 'warning'
                    });
                    return;
                }
                this.dialogMenuVisible = false;
                axios.post(context+'role/updateRoleMenu',{
                    roleCode:this.singleSelection.roleCode,
                    addArr: addArr,
                    delArr: delArr
                }).then(response => {
                    if(response.data){
                        this.$message({
                            showClose: true,
                            message: response.data.msg,
                            type: response.data.success?'success':'error'
                        });
                    }
                }).catch(function (error) { // 请求失败处理
                        console.log(error);
                    });

            }
        },
        mounted(){
            this.queryData(this.page)
        }
    })
</script>
</html>
